<template>
    <div class="">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" label-position="right">
            <div class="title">链路参数</div>
            <el-form-item label="模块" prop="link">
                <el-select v-model="formData.link" placeholder="请选择模块" style="width:100%">
                    <el-option label="4G" :value="1"></el-option>
                    <el-option label="LAN" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开关" prop="en">
                <el-select v-model="formData.en" placeholder="请选择开关状态" style="width:100%">
                    <el-option label="关闭" :value="0"></el-option>
                    <el-option label="开启" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务器IP" prop="ip">
                <el-input v-model="formData.ip" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="端口号" prop="port">
                <el-input v-model="formData.port" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="传输协议" prop="protocol">
                <el-select v-model="formData.protocol" placeholder="请选择传输协议" style="width:100%">
                    <el-option label="TCP" :value="1"></el-option>
                    <el-option label="UDP" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <!-- <div class="title mt20">终端协议</div>
            <el-form-item label="地址" prop="addr">
                <el-input v-model="formData.addr" oninput="value=value.replace(/[^\d]/g,'')"
                    placeholder="范围：0000000000~9999999999"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="formData.pwd" oninput="value=value.replace(/[^\d]/g,'')"
                    placeholder="范围：0000~9999"></el-input>
            </el-form-item>
            <el-form-item label="心跳间隔" prop="interval">
                <el-input v-model="formData.interval" oninput="value=value.replace(/[^\d]/g,'')">
                    <i slot="suffix" class="input-suffix">分</i>
                </el-input>
            </el-form-item>
            <el-form-item label="类型" prop="ctype">
                <el-input v-model="formData.ctype"></el-input>
            </el-form-item> -->

            <!-- <el-form-item>
                <el-button type="primary" @click="submitForm">保 存</el-button>
            </el-form-item> -->
        </el-form>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const form = ref(null)
const formData = ref({
    link: 1,
    en: 1,
    ip: '192.168.1.125',
    port: '8080',
    protocol: 1,
    addr: '111',
    pwd: '2222',
    interval: 50,
    ctype: 'k001'
});
const formRules = {
    link: [
        { required: true, message: '请选择模块', trigger: 'blur' }
    ],

    en: [
        { required: true, message: '请选择开关状态', trigger: 'blur' }
    ],
    ip: [
        { required: true, message: '请输入服务器IP', trigger: 'blur' }
    ],
    port: [
        { required: true, message: '请输入端口号', trigger: 'blur' }
    ],
    protocol: [
        { required: true, message: '请选择传输协议', trigger: 'blur' }
    ],
    addr: [
        { required: true, message: '请输入地址', trigger: 'blur' },
        { min: 10, max: 10, message: '只能输入10个字符！', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 4, max: 4, message: '只能输入4个字符！', trigger: 'blur' }
    ],
    interval: [
        { required: true, message: '请输入心跳间隔', trigger: 'blur' }
    ],
    ctype: [
        { required: true, message: '请输入类型', trigger: 'blur' }
    ],
};



// const submitForm = () => {
//     form.value.validate((valid: boolean) => {
//         if (valid) {
//             // 表单验证通过，可以进行提交操作
//             // ...
//         } else {
//             // 表单验证不通过，进行错误处理
//             return false;
//         }
//     });
// };


</script>


<style lang="scss" scoped>
.title {
    font-size: 15px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 20px;
    padding-bottom: 6px;
    font-weight: 600;
}
</style>